<template>
  <div>
    <!-- 自适应宽度的输入框 -->
    <input :style="updateInputWidth" v-model="val" @input="valueChange" />
    <textarea v-model="val"></textarea>
  </div>
</template>

<script>
export default {
  methods: {
    data() {
      return {
        updateInputWidth: { width: '60px', height: '40px' },
        val: '',
      }
    },
    valueChange() {
      let len = val.value.length * 15 + 15
      if (len > 500) {
        len = 500
      }
      this.updateInputWidth.width = len + 'px'
    },
  },
}
</script>

<style></style>
